<script lang="ts" setup>
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import LxPop from './common/LxPop.vue'

withDefaults(defineProps<{
  modelValue: boolean
}>(), {
  modelValue: false,
})

defineEmits<{
  (e: 'update:modelValue', value: boolean): void
}>()
</script>

<template>
  <div>
    <div
      fixed right-0 top-0 h-16 w-18 flex-cc
      @click="$emit('update:modelValue', true)"
    >
      <FontAwesomeIcon icon="bars" h-6 w-6 />
    </div>
    <LxPop :model-value="modelValue" @update:model-value="$emit('update:modelValue', $event)">
      <slot />
    </LxPop>
  </div>
</template>

<style scoped>

</style>
